<template>
    <el-col>
        <el-dialog title="增加" :visible.sync="addDialogVisible" :before-close="handleCloseAddDialog">
            <el-form ref="hospitalTypeInfo" :model="hospitalTypeInfo" label-width="100px">
                <el-form-item label="名字" prop="name">
                    <el-input v-model="hospitalTypeInfo.name" />
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleCloseAddDialog">取 消</el-button>
                <el-button type="primary" @click="handleConfirmAddDialog">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog title="更新" :visible.sync="updateDialogVisible" :before-close="handleCloseUpdateDialog">
            <el-form ref="hospitalTypeInfo" :model="hospitalTypeInfo" label-width="100px">
                <el-form-item label="名字" prop="name">
                    <el-input v-model="hospitalTypeInfo.name" />
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleCloseUpdateDialog">取 消</el-button>
                <el-button type="primary" @click="handleConfirmUpdateDialog">确 定</el-button>
            </span>
        </el-dialog>

        <el-row>
            <el-col :span="2">
                <!-- <el-button type="primary" @click="addDialogVisible = true">增加</el-button> -->
                <el-button type="primary" @click="addDialogVisible = true">增加</el-button>
            </el-col>
            <el-col :span="2">
                <el-button :disabled="multipleSelection.length > 1" type="warning" @click="showUpdateDialogVisible">更新
                </el-button>
            </el-col>
            <el-col :span="2">
                <el-button type="danger" @click="handleDeleteSelectIds">删除</el-button>
            </el-col>
            <el-col :span="5">
                <el-input v-model="query.name" type="text" />
            </el-col>
            <el-col :span="2">
                <el-button @click="queryClear"> 清除 </el-button>
            </el-col>
            <el-col :span="2">
                <el-button @click="doSelectAll"> 搜索 </el-button>
            </el-col>
        </el-row>
        <el-table ref="multipleTable" :data="hospitalTypeList" style="width: 100%" row-key="hospitalTypeId" lazy
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="hospitalTypeId" label="类型ID" />
            <el-table-column prop="name" label="类型名" />
        </el-table>
        <el-pagination background layout="prev, pager, next" :total="total" prev-click="" next-click="" />
    </el-col>
</template>

<script>
export default {
    name: "MHospitalType",
    data() {
        return {
            addDialogVisible: false,
            updateDialogVisible: false,

            hospitalTypeId: 0,

            hospitalTypeInfo: {
                name: "",
            },

            hospitalTypeList: [],
            page: 0,
            pageSize: 10,
            total: 0,

            query: {
                name: ""
            },

            multipleSelection: [],
        };
    },
    created() {
        this.doSelectAll();
    },
    methods: {
        currentChange(index) {
            this.page = index - 1;
        },
        showUpdateDialogVisible() {
            if (this.multipleSelection.length === 0) {
                this.$message.error("请选择");
                return;
            }
            this.hospitalTypeInfo = this.multipleSelection[0];
            this.updateDialogVisible = true;
        },

        showMenuDialogVisible(hospitalTypeId) {
            this.hospitalTypeId = hospitalTypeId;
            this.menuDialogVisible = true;
        },

        handleSelectionChange(val) {
            this.multipleSelection = val;
        },

        handleCloseAddDialog() {
            this.addDialogVisible = false;
            this.refresh();
        },

        handleConfirmAddDialog() {
            this.$refs.hospitalTypeInfo.validate((valid) => {
                if (valid) {
                    this.addDialogVisible = false;
                    this.$store
                        .dispatch("hospitalType/addHospitalType", this.hospitalTypeInfo)
                        .then(() => { });
                }
            });
            this.refresh();
        },

        handleCloseUpdateDialog() {
            this.updateDialogVisible = false;
            this.refresh();
        },
        handleConfirmUpdateDialog() {
            this.$refs.hospitalTypeInfo.validate((valid) => {
                if (valid) {
                    this.updateDialogVisible = false;
                    this.$store
                        .dispatch("hospitalType/updateHospitalType", this.hospitalTypeInfo)
                        .then(() => { });
                }
            });
            this.refresh();
        },

        handleCloseMenuDialog() {
            this.menuDialogVisible = false;
        },
        handleDeleteSelectIds() {
            const ids = [];
            for (const obj of this.multipleSelection) {
                ids.push(obj.hospitalTypeId);
            }
            this.$store
                .dispatch("hospitalType/deleteHospitalType", ids)
                .then(() => { });
            this.doSelectAll();
        },

        doSelectAll() {
            this.$store
                .dispatch("hospitalType/selectAllHospitalType", {
                    obj: {
                        name: this.query.name,
                        hospitalId: this.query.hospitalId != "" ? this.query.hospitalId : 0,
                    },
                    page: this.page,
                    pageSize: this.pageSize,
                })
                .then((res) => {
                    this.hospitalTypeList = res.list;
                    this.total = res.total;
                });
        },

        queryClear() {
            this.query = {
                name: ""
            }
            this.doSelectAll()
        },

        prevClick() {
            this.page -= 1;
            this.doSelectAll();
        },
        nextClick() {
            this.page += 1;
            this.doSelectAll();
        },

        refresh() {
            this.hospitalTypeInfo = {
                name: "",
            };
            this.doSelectAll();
            this.$refs.multipleTable.clearSelection();
        },

    },
}
</script>

<style scoped>

</style>